import React from 'react';
import { Modal, message, Button } from 'antd';
import baseService from 'share/base.service';
import configureStore from 'stores';
import { setDocumentaryCompany } from 'actions/login';
import mainService from 'containers/main.service';
import {messages, removeToken} from 'share/common';
// import banner from 'images/login/etraining.png';/
// import banner from 'images/login/etraining2.png';
import banner from 'images/login/etraining3.png';

export default class RequireETraining extends React.Component {

  constructor() {
    super();
    console.log('RequireETraining');
    this.state = {
      eid: '',
      eTrainingChecked: false,
      eTrainingStatus: -1, // 0 ok, 1 did not training, 2 error
      eTrainingCheckError: null,
      checking: false
    };
  }

  componentDidUpdate() {
    if (!this.state.eTrainingChecked && !this.state.checking) {
      this.checkEtraining();
    }
  }

  checkEtraining = async () => {
    let error = null;
    let res = null;
    try {
      this.setState({ eTrainingChecked: true });
      res = await baseService.checkETraining();
      if (res.status !== 200) {
        throw res;
      }

    } catch (e) {
      error = e;
      this.setState({
        eTrainingStatus: 2,
        checking: false,
        eTrainingCheckError: e
      });
    }
    if (!error) {
      this.setState({
        // true:'$1' 是需要考试，false:null是不需要考试
        eTrainingStatus: res.data.true ? 1 : 0,
        eid: res.data.true,
        checking: false,
        eTrainingCheckError: null
      });
    }
  }

  logout = () => {
    // 清空documentaryCompany的redux信息
    configureStore.store.dispatch(setDocumentaryCompany({}));
    // 有了单点登录之后
    mainService.loginOutSso()
      .then((res) => {
        removeToken('language');
        this.context.router.push('/?logout_sso=true');
      }).catch(e => {
        this.context.router.push('/?logout_sso=true');

      });
  };

  getModalPropsFromETrainingError = () => {
    const { eTrainingCheckError } = this.state;
    const props = {
      closable: false,
      title: '未知错误',
      content: '请询问系统管理员',
      keyboard: false,
      footer: [
        <Button key="back" type="primary" onClick={this.logout}>
          返回
        </Button>
      ],
    };
    if (!eTrainingCheckError) return props;
    if (eTrainingCheckError.response) {
      props.title = eTrainingCheckError.response.data.message;
    }

    return props;
  }

  handleGoEtraining = () => {
    // location.href = `https://etraining.mcd.com.cn:5501/sso/entrance.aspx?request-locale=zh-cn&user-id=${this.state.eid}&lessonuid=02367ea2-d459-4a40-b1a7-f0c698c4ef28`;
    // location.href = `https://etraining.mcd.com.cn:5501/dev/officeemployees/OfficeOnLineDetail.aspx?BatchUid=efd08b06-92f9-438e-aa9c-57ac659828e7&lessontype=1&user-id=${this.state.eid}`;
    // location.href = `https://etraining.mcd.com.cn:5501/sso/entrance.aspx?request-locale=zh-cn&user-id=${this.state.eid}&lessonuid=efd08b06-92f9-438e-aa9c-57ac659828e7`
  }

  render() {

    const {eTrainingStatus} = this.state;

    if (eTrainingStatus === 0) {
      return this.props.children;
    }
    if (eTrainingStatus === 1) {
      return (
        <Modal
          closable={false}
          visible
          keyboard={false}
          // footer={[
          //   <Button key="back" type="primary" onClick={this.logout}>返回</Button>
          // ]}
          footer={null}
        >
          <div onClick={this.handleGoEtraining}>
            <p>
              亲爱的用户，为了帮助您快速了解《麦当劳中国行政管理费用政策》，让您的每次报销都顺利又高效，我们制作了这个政策的课件；年度第一次报销前，请您扫描下方二维码进入考试系统，学习并通过测试。
            </p>
            <img src={banner} alt="请进入考核系统" style={{ width: '100%', cursor: 'pointer'}} />
          </div>
        </Modal>
      );
    }
    if (eTrainingStatus === 2) {
      const props = this.getModalPropsFromETrainingError();
      return <Modal visible {...props}>{props.content}</Modal>;
    }
    return null;
  }
}

RequireETraining.contextTypes = {
  router: React.PropTypes.object
};
